import React, { Component } from 'react'
import { Button } from 'antd';

// 引入store,用于获取redux中保存的状态
import store from '../../redux/store';
//引入actionCreator,专门用于创建action对象
import {createIncrementAction,createDecrementAction} from '../../redux/count_action';

export default class Count extends Component {
    // componentDidMount() {
    //     // 监测redux中状态的变化，只要变化，就调用render
    //     store.subscribe(() => {
    //         this.setState({});
    //     })
    // }
    //加法
    increment = () => {
        let { value } = this.selectNumber;
        //通知store状态变化
        store.dispatch(createIncrementAction(value*1))
    }
    // 减法
    decrement = () => {
        let { value } = this.selectNumber;
        store.dispatch(createDecrementAction(value*1)) 
    }
    render() {
        return (
            <div>
                <h1>当前求和为：{ store.getState()}</h1>
                &nbsp;<select ref={(c)=>{this.selectNumber = c}}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <Button onClick={this.increment} type="primary">加</Button>&nbsp;
                <Button onClick={this.decrement} type="primary">减</Button>
            </div>
        )
    }
}
